<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <h3>复杂形状样式</h3>
    <div class="content">
        <!-- 太极 -->
        <div id="yin-yang"></div>

        <!-- 弯尾箭头 -->
        <div id="curvedarrow"></div>

        <!-- 六角星 -->
        <div id="star-six"></div>

        <!-- 五角星 -->
        <div id="star-five"></div>

        <!-- 五边形 -->
        <div id="pentagon"></div>

        <!-- 六边形 -->
        <div id="hexagon"></div>

        <!-- 八边形 -->
        <div id="octagon"></div>

        <!-- 心形 -->
        <div id="heart"></div>

        <!-- 无限图形 -->
        <div id="infinity"></div>

        <!-- 砖石盾牌 -->
        <div id="diamond-shield"></div>

        <!-- 砖石形 -->
        <div id="cut-diamond"></div>

        <!-- 鸡蛋 -->
        <div id="egg"></div>

        <!-- 吃豆人 -->
        <div id="pacman"></div>

        <!-- 聊天框 -->
        <div id="talkbubble"></div>

        <!-- 爆炸形状 -->
        <div id="burst-12"></div>

        <!-- 徽章 -->
        <div id="badge-ribbon"></div>

        <!-- 电视屏幕 -->
        <div id="tv"></div>

        <!-- 雪佛龙 -->
        <div id="chevron"></div>

        <!-- 放大镜 -->
        <div id="magnifying-glass"></div>

        <!-- Facebook图标 -->
        <div id="facebook-icon"></div>

        <!-- 十字架 -->
        <div id="cross"></div>

        <!-- 月亮 -->
        <div id="moon"></div>

        <!-- 太空入侵者 -->
        <div id="space-invader"></div>
    </div>


    <h3>基础形状样式</h3>
    <div class="content">
        <!-- 正方形 -->
        <div id="square"></div>

        <!-- 矩形 -->
        <div id="rectangle"></div>

        <!-- 圆形 -->
        <div id="circle"></div>

        <!-- 椭圆 -->
        <div id="oval"></div>

        <!-- 向上的三角形 -->
        <div id="triangle-up"></div>

        <!-- 向下的三角形 -->
        <div id="triangle-down"></div>

        <!-- 向左的三角形 -->
        <div id="triangle-left"></div>

        <!-- 向右的三角形 -->
        <div id="triangle-right"></div>

        <!-- 左上的三角形 -->
        <div id="triangle-topleft"></div>

        <!-- 右上的三角形 -->
        <div id="triangle-topright"></div>

        <!-- 左下的三角形 -->
        <div id="triangle-bottomleft"></div>

        <!-- 右下的三角形 -->
        <div id="triangle-bottomright"></div>

        <!-- 梯形 -->
        <div id="trapezoid"></div>

        <!-- 平行四边形 -->
        <div id="parallelogram"></div>

        <!-- 菱形 -->
        <div id="diamond"></div>

        <!-- 长菱形 -->
        <div id="diamond-narrow"></div>
    </div>
</body>

</html>